import trim from 'lodash/trim';
import {Icon} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
import Echart from '../report-public/flow-e-chart/index';
import ReportEchartAlert from '../report-public/report-echart-alert/index';
import * as ReportUtil from '../../../util/reportUtil';
import {echartTipNewLine} from "../../../util/reportUtil";
const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const echartoption = this.initEchartOption();
        const {itemClickEvent, eChartDatas, loading} = this.props;
        const {title = '', flowReqData = []} = eChartDatas;
        return (
            <div className="analyse-e-chart">
                {flowReqData.length > 0 ?
                    <div>
                        <div className="e-chart-head">
                            <span className="e-chart-head-name">{`${title}(TOP5)`}</span>
                            <span className="e-chart-head-more">
								<span onClick={this.showMore.bind(this)} style={{'marginRight': '10px'}}>{getLabel(17499,'更多')}</span>
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hz003w`} type="download" title={getLabel(385746,'另存为图片')} onClick={this.downloadImg.bind(this)}/>
							</span>
                        </div>
                        <div className="e-chart-main">
                            <Echart ecId={`${this && this.props && this.props.ecId || ''}_Echart@b08tii`} ref="echart" echartoption={echartoption} clickEvent={this.doClickEvent.bind(this)}/>
                        </div>
                    </div>
                    :
                    <ReportEchartAlert ecId={`${this && this.props && this.props.ecId || ''}_ReportEchartAlert@jj9m1c`} loading={loading}/>
                }
            </div>
        )
    }

    initEchartOption() {
        const {eChartDatas} = this.props;
        const {flowReqData = [], endReqData = [], yAxisData = [], legend = [], title = ''} = eChartDatas;
        const _flowReqData = [];
        const _endReqData = [];
        const _yAxisData = [];
        const _legend = [];
        flowReqData.map(o => _flowReqData.push(o));
        endReqData.map(o => _endReqData.push(o));
        yAxisData.map(o => _yAxisData.push(o));
        legend.map(o => _legend.push(o));
        const echartoption = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    let tipInfo  = [];
                    const {axisValue = ''} = params[0];
                    tipInfo.push(echartTipNewLine(axisValue, 50));
                    params.map((o)=>{
                        const {marker,name,seriesName,data = {}} = o;
                        const {value} = data;
                        tipInfo.push('<br/>');
                        tipInfo.push(marker);
                        tipInfo.push(seriesName);
                        tipInfo.push('：'+value);
                    })
                    return tipInfo.join('');
                },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                    shadowStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                }
            },
            legend: {
                data: _legend
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                minInterval: 1,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: _yAxisData,
                axisLabel: {
                    formatter: function (value) {
                        let __value = trim(value);
                        return ReportUtil.InterceptLabel(__value, 12);
                    }
                }
            },
            color: ['#F67C4C', '#D65DF4'],
            series: [
                {
                    name: legend[0],
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    barWidth: 40,
                    data: _flowReqData
                },
                {
                    name: legend[1],
                    type: 'bar',
                    stack: '总量',
                    barWidth: 40,
                    label: {
                        normal: {
                            show: false,
                            position: 'inside'
                        }
                    },
                    data: _endReqData
                }
            ]
        };
        return echartoption;
    }

    showMore() {
        const {showModal} = this.props;
        showModal && showModal(1,{});
    }

    doClickEvent(flag,data= {}){
        const {showModal,module} = this.props;
        showModal && showModal(2,{'module':module,...data});
    }

    downloadImg() {
        const echartid = this.refs.echart.getEchartId();
        const cvs = jQuery("div[_echarts_instance_='" + echartid + "'] canvas")[0];
        ReportUtil.downloadCvs2Img(cvs);
    }
}
